
<template>
  <div id="app1">
    <!-- <h3>{{ num }}</h3>
    <button @click="num++">点击</button>
    <div v-for="(item, index) in arr" :key="index">{{ item.name }}</div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in tabarr" :key="index" :title="item.name">
        <div v-for="(ite,ind) in item.children" :key="ind">
          <img :src="ite.img" alt="">
        </div>
      </van-tab> -->

      <!-- <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab> -->
    <!-- </van-tabs> -->
    <!-- {{send}} -->
    <button @click="sendparent">点击我给父组件传递数据</button>
    <button @click="sendbrothre">向兄弟组件发送数据</button>
  </div>
</template>

<script>
import Vue from "vue";
// import { Swipe, SwipeItem } from "vant";
// import { Tab, Tabs } from "vant";

// Vue.use(Tab);
// Vue.use(Tabs);
// Vue.use(Swipe);
// Vue.use(SwipeItem);
import axios from "axios";
// 一个.vue 文件叫做一个组件,每一个组件都有完整的生命周期（在某些特定的时间端内自动执行的函数）
// 快捷键w 生成vue的模版
// vue2 每一个组件的this指向当前组件的实例

export default {
  props:['send'],
  data() {
    return {
      num: "1",
      arr: [],
      tabarr:[],
      active:2
    };
  },
  // beforeCreate(){
  //     console.log(this,"befforeCreated");
  // },
  created() {
    // 发送网络请求
    console.log(this, "created", document.getElementById("app1"));
  },
  // beforeMount () {
  //   console.log("beforeMount",document.getElementById("app1"))
  // },
  mounted() {
    // 发送网络请求.实例化一些插件
    console.log("Mounted", document.getElementById("app1"));
    axios.get("/api/list").then((res) => {
      console.log(res.data);
      this.arr = res.data;
    });
     axios.get("/api/tablist").then((res) => {
      console.log(res.data);
      this.tabarr = res.data;
    });
  },
  methods:{
    sendparent(){
      this.$emit("event","我是子组件的数据")
    },
    sendbrothre() {
        this.$bus.$emit("brother","我是homeview里的数据")
    }
  },
  // beforeUpdate(){ // 组件更新前
  //     console.log("组件更新前")
  // },
  //  updated() { // 组件更新后
  //     console.log("组件更新后")
  //  },
  beforeDestroy() {
    // 组件卸载前
    console.log("组建卸载前");
    // 卸载betterscroll 清除延时器
  },
  //  destroyed() { // 组件卸载后
  //     console.log("组件卸载后")
  //  }
};
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>